<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button
            type="primary"
            class="handle-del mr10"
            @click="dialogFormVisible2 =true" size="small">
          创建商品拆料</el-button>
        <el-button
            type="primary"
            class="handle-del mr10"
            @click="dialogFormVisibleSelect =true" size="small"
        >查询</el-button >
        <el-button
            type="primary"
            class="handle-del mr10"
            @click="putViews" size="small"
        >导出报表</el-button>

      </div>
      <el-table
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
          @selection-change="handleSelectionChange">
        <el-table-column prop="ID" label="ID" width="40px" align="center"></el-table-column>
        <el-table-column prop="Status" label="状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.Status===0 ? '未审批':'已审批'}}
          </template>
        </el-table-column>
        <el-table-column prop="danJuId" label="单据编号" width="150px" align="center"></el-table-column>
        <el-table-column prop="createDate" label="创单日期" align="center"></el-table-column>
        <el-table-column prop="detalName" label="总部名称" align="center"></el-table-column>
        <el-table-column prop="createName" label="创单人" align="center"></el-table-column>
        <el-table-column prop="shenPiName" label="审批人" align="center"></el-table-column>
        <el-table-column prop="shenPiDate" label="审批日期" align="center"></el-table-column>
        <el-table-column label="操作" width="250" align="center" >
          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.$index, scope.row)">查看(编辑)</el-button>
            <el-button type="text" @click="chailiaomingxi(scope.$index, scope.row)">拆料明细</el-button>
            <el-button type="text" class="red" @click="del(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="query.pageIndex"
            :page-size="query.pageSize"
            :total="pageTotal"
            @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="详情" :visible.sync="dialogFormVisibleLook" width="50%" align="center"  :close-on-click-modal="false">
      <el-form :inline="true" :model="form" class="demo-form-inline" label-width="100px">
        <el-form-item label="单据编号" :label-width="formLabelWidth" >
          <el-input v-model="form.danJuId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.Status" style="width:206px">
            <el-option label="0" value="未审批"></el-option>
            <el-option label="1" value="已审批"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建日期" :label-width="formLabelWidth" class="right">
          <el-input v-model="form.createDate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="总部名称">
          <el-select v-model="form.detalName" style="width:206px">
            <el-option label="北京总部" value="beijing" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类库名称" :label-width="formLabelWidth" class="right">
          <el-input v-model="form.lkName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量" :label-width="formLabelWidth" >
          <el-input v-model="form.num" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="重量" :label-width="formLabelWidth" class="right">
          <el-input v-model="form.weight" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标签金额" :label-width="formLabelWidth" class="right">
          <el-input v-model="form.labelMoney" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成本" :label-width="formLabelWidth"  >
          <el-input v-model="form.chengben" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="创单人" :label-width="formLabelWidth" >
          <el-input v-model="form.createName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="审批人" :label-width="formLabelWidth" class="right">
          <el-input v-model="form.shenPiName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="审批日期" :label-width="formLabelWidth" >
          <el-input v-model="form.shenPiDate" autocomplete="off"></el-input>
        </el-form-item>
        <br>
        <el-form-item class="anniu" >
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
<!--    //创建商品拆料-->
    <el-dialog title="新增商品拆料" :visible.sync="dialogFormVisible2"  width="62%" align="center" :close-on-click-modal="false">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单编号" :label-width="formLabelWidth" >
              <el-input v-model="form.dingdanId" autocomplete="off">{{danJuId}}</el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创单日期" :label-width="formLabelWidth" class="right">
              <el-input v-model="form.chuangdanDate" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品类型">
              <el-select v-model="form.spleixing" placeholder="请选择活动区域" style="width:206px">
                <el-option label="素金类" value="shanghai"></el-option>
                <el-option label="镶嵌类" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品编码" :label-width="formLabelWidth" >
              <el-input v-model="form.spId" autocomplete="off">{{danJuId}}</el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品名称" :label-width="formLabelWidth" class="right">
              <el-input v-model="form.spName" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="模具号" :label-width="formLabelWidth" class="right">
              <el-input v-model="form.mujuId" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="出库门店">
          <el-select v-model="form.chukumendian" placeholder="请选择出库门店" style="width:206px">
            <el-option label="北京总部" value="beijing"></el-option>
            <el-option label="北京分部" value="beijing"></el-option>
            <el-option label="上海分部" value="shanghai"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证书编号" :label-width="formLabelWidth" >
          <el-input v-model="form.zhengshuId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成色" :label-width="formLabelWidth" class="right">
          <el-input v-model="form.chengse" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="重量" :label-width="formLabelWidth" >
          <el-input v-model="form.zhongliang" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单件重" :label-width="formLabelWidth" class="right">
          <el-input v-model="form.djzhongliang" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量" :label-width="formLabelWidth" class="right">
          <el-input v-model="form.shuliang" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手寸" :label-width="formLabelWidth"  >
          <el-input v-model="form.shoucun" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="料价" :label-width="formLabelWidth" >
          <el-input v-model="form.liaojia" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="销售工费" :label-width="formLabelWidth" class="right">
          <el-input v-model="form.xsgongfei" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="附加费" :label-width="formLabelWidth" >
          <el-input v-model="form.fujiafei" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="系列名称" :label-width="formLabelWidth" >
          <el-input v-model="form.xilieName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="品牌" :label-width="formLabelWidth" >
          <el-input v-model="form.pinpai" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格类型" :label-width="formLabelWidth" >
          <el-input v-model="form.priceleixing" autocomplete="off"></el-input>
        </el-form-item><el-form-item label="附加费" :label-width="formLabelWidth" >
        <el-input v-model="form.fujiafei" autocomplete="off"></el-input>
      </el-form-item>
        <el-form-item label="标签单价" :label-width="formLabelWidth" >
          <el-input v-model="form.labelPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="成本计价" :label-width="formLabelWidth" >
              <el-input v-model="form.chengBenJiJia" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="anniu" >
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
<!--    //拆料查询-->
    <el-dialog title="查询" :visible.sync="dialogFormVisibleSelect"  width="33%" align="center"  :close-on-click-modal="false">
      <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="创单人">
            <el-input v-model="form.chuangdanren"></el-input>
          </el-form-item>
        <el-form-item label="商品类型">
          <el-select v-model="form.spleixing" placeholder="请选择活动区域" style="width:381px">
            <el-option label="素金类" value="shanghai"></el-option>
            <el-option label="镶嵌类" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出库门店">
          <el-select v-model="form.chukumendian" placeholder="请选择出库门店" style="width:381px">
            <el-option label="北京总部" value="beijing"></el-option>
            <el-option label="北京分部" value="beijing"></el-option>
            <el-option label="上海分部" value="shanghai"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单据编号">
          <el-col :span="11">
            <el-input v-model="form.danJuId1"></el-input>
          </el-col>
          <el-col class="line" :span="2" align="center">-</el-col>
          <el-col :span="11">
            <el-input v-model="form.danJuId1"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="创单日期">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2" align="center">-</el-col>
          <el-col :span="11">
            <el-date-picker type="date"  v-model="form.date2" style="width:100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-button type="primary">确定</el-button>
      </el-form>
    </el-dialog>
<<<<<<< HEAD
=======
<!--    //拆料明细-->
>>>>>>> 960f9f5... 修改了按钮大小，增加了表单内容的显式
    <el-dialog title="拆料明细" :visible.sync="mingxi"  width="95%" align="center"  :close-on-click-modal="false">
      <div>
        <div class="dingdanbianhao">
            <el-form :model="form" :inline="true" style="height: 30px">
              <el-form-item label="单据编号：" style="margin-right: 30px">
                <input type="text" readonly="redonly" v-model="form.danJuId">
              </el-form-item>
             <el-form-item label="创单日期:">
               <input type="text"  value="2020/10/28" readonly="redonly" v-model="form.createDate">
             </el-form-item>
            </el-form>
        </div>
        <el-table class="chailiaomingxi"
            :data="tableData1"
            border
            style=" margin-top: 20px">
          <el-table-column>
            <el-table-column
                label="行号"
                width="50">
            </el-table-column>
          </el-table-column>
          <el-table-column>
            <el-table-column
                prop="shanpinId"
                label="商品编码"
                width="100">
            </el-table-column>
          </el-table-column>
          <el-table-column>
            <el-table-column
                prop="shangpinName"
                label="商品名称"
                width="120">
            </el-table-column>
          </el-table-column>
          <el-table-column>
            <el-table-column
                prop="goldWeight"
                label="金重"
                width="50">
            </el-table-column>
          </el-table-column>
          <el-table-column>
            <el-table-column
                prop="goldPrice"
                label="金价"
                width="50">
            </el-table-column>
          </el-table-column>
          <el-table-column>
            <el-table-column
                prop="money"
                label="金额"
                width="50">
            </el-table-column>
          </el-table-column>
          <el-table-column
              prop="baoCode"
              label="主石">
            <el-table-column
                prop="baoCode"
                label="包号">
            </el-table-column>
            <el-table-column
                prop="number"
                label="重/数量"
                width="70">
            </el-table-column>
            <el-table-column
                prop="stonMOney"
                label="金额">
            </el-table-column>
          </el-table-column>
            <el-table-column
                prop="peishi"
                label="配石1">
              <el-table-column
                  prop="peishiName"
                  label="名称"
                  width="50">
              </el-table-column>
              <el-table-column
                  prop="number"
                  label="重/数量"
                  width="70">
              </el-table-column>
              <el-table-column
                  prop="stonMOney"
                  label="金额">
              </el-table-column>
            </el-table-column>
          <el-table-column
              prop="peishi1"
              label="配石2">
            <el-table-column
                prop="peishiName"
                label="名称"
                width="50">
            </el-table-column>
            <el-table-column
                prop="number"
                label="重/数量"
                width="70">
            </el-table-column>
            <el-table-column
                prop="stonMOney"
                label="金额">
            </el-table-column>
          </el-table-column>
          <el-table-column>
            <el-table-column
                prop="gongfei"
                label="工费">
            </el-table-column>
          </el-table-column>
          <el-table-column>
            <el-table-column
                prop="zhengshufei"
                label="证书费">
            </el-table-column>
          </el-table-column>
          <el-table-column>
            <el-table-column
                prop="chengben"
                label="成本">
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'chailiao',
  data() {
    return {
      query: {
        address: '',
        name: '',
        pageIndex: 1,
        pageSize: 10,
        getchailiaoList:[]
      },
      labelPosition: 'right',
      dialogFormVisibleLook: false,
      mingxi: false,
      dialogFormVisible2:false,
      dialogFormVisibleSelect:false,
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      pageTotal: 0,
      form: {},
      idx: -1,
      id: -1
    };
  },
  created() {
    this.getData();
    // this.getchailiaoList();

  },
  methods: {
    //获取 easy-mock 的模拟数据
    getData () {
      let res = {
        'list': [
          {
            ID: 1,
            Status: 1,
            danJuId: "CL1001",
            createDate: "2020-9-21",
            detalName: "北京总部",
            createName: "陈露",
            shenPiName: "张耀文",
            shenPiDate: "2020-9-23",
            num: 20,
            weight: "32g",
            labelMoney: 3200,
            lkName: "成都分部",
            chengben: 1700
          },
          {
            ID: 2,
            Status: 1,
            danJuId: "CL1002",
            createDate: "2020-9-21",
            detalName: "北京总部",
            createName: "陈露",
            shenPiName: "张耀文",
            shenPiDate: "2020-9-23",
            num: 20,
            weight: "32g",
            labelMoney: 3200,
            lkName: "成都分部",
            chengben: 1700
          },
          {
            ID: 3,
            Status: 0,
            danJuId: "CL1003",
            createDate: "2020-9-21",
            detalName: "北京总部",
            createName: "陈露",
            shenPiName: "张耀文",
            shenPiDate: "2020-9-23",
            num: 20,
            weight: "32g",
            labelMoney: 3200,
            lkName: "成都分部",
            chengben: 1700
          },
          {
            ID: 4,
            Status: 0,
            danJuId: "CL1004",
            createDate: "2020-9-21",
            detalName: "北京总部",
            createName: "陈露",
            shenPiName: "张耀文",
            shenPiDate: "2020-9-23",
            num: 20,
            weight: "32g",
            labelMoney: 3200,
            lkName: "成都分部",
            chengben: 1700
          }
        ]
      };
      console.log(res.list[0].danJuId);
      this.tableData = res.list;
      this.pageTotal = res.pageTotal || 50;
    },
    //详细编辑
    edit (index,row) {
      this.idx = index;
      this.form = row;
      this.dialogFormVisibleLook = true;
    },
    //拆料明细
    chailiaomingxi (index,row) {
      this.idx = index;
      this.row = row;
      this.form.danJuId = row.danJuId;
      this.form.createDate = row.createDate;
      this.mingxi = true;
    },
    //删除操作
    del(index) {
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning"}).then(() => {
          this.$message.success ("删除成功");
          this.tableData.splice(index, 1);}).catch(() => {});
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      this.getData();
    }
  }
};
</script>
<style scoped>
.handle-box {
  margin-bottom: 20px;
}
.dingdanbianhao input {
  width: 200px;
  height: 20px;
  margin-left: 10px;
}
.dingdanbianhao span {
  margin-right: 50px;
}
.dingdanbianhao {
  text-align: left;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.anniu {
  margin-top: 30px;
  text-align: center;
}
</style>
